import { defineComponent, h, markRaw, ref, toRaw, watch, watchEffect } from 'vue'
import DataNode from '../../ItemNode/DataNode.tsx'
import { ElInput, ElRadioButton, ElRadioGroup, ElText } from 'element-plus'
import classes from '../../ItemNode/ItemNode.module.css'
import { editing } from '../../store/store.js'
import { computed } from 'vue'

export default class NList extends DataNode {
  isNList = true
  isContainerNode = true
  isDataDisplayNode = true
  styleDisplay = 'flex'

  constructor(node?: NList) {
    super(node)

    if (!node) {
      this.path = './components/NList/NList.tsx'
      this.name = '列表容器'

      const style = this.props.style
      this.props.style = {
        ...style,
        minWidth: '50px',
        minHeight: '16px',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        paddingTop: '5px',
        paddingRight: '5px',
        paddingBottom: '5px',
        paddingLeft: '5px',
        backgroundImage: 'unset',
        display: this.styleDisplay,
        flexWrap: 'nowrap',
        flexDirection: 'row',
        justifyContent: 'start',
        alignContent: 'start',
        alignItems: 'start',
        rowGap: '0px',
        columnGap: '0px'
      }

      this.props.data = []
      this.props.dataUrl = ''
      this.props.dataFn = 'function () {\n  return [1, 2]\n}'
      this.props.dataFnable = true
    }

    const pComponent = this.component
    this.component = markRaw(
      defineComponent(
        (props) => {
          const items = ref([])

          const childChanges = computed(() => {
            if (this.children[0]) {
              const changes = []

              this.children[0].traverse((node) => {
                changes.push(node.props)
              })

              return changes
            }

            return undefined
          })

          watch(
            [() => this.props.data, childChanges],
            () => {
              let child = this.children[0]

              if (child)
                items.value = this.props.data.map((item, index) => {
                  if (child) {
                    if (index !== 0) child = child.clone()

                    child.traverse((node) => {
                      if (node.isDataNode) {
                        toRaw(node).itemData.value = { item, index }
                      }
                    })

                    return child
                  }
                })
              else items.value = []
            },
            {
              deep: true
            }
          )

          return () => (
            <pComponent class="container">
              {() =>
                items.value.map((item, index) =>
                  h(
                    item.component,
                    editing.value
                      ? {
                          style: {
                            pointerEvents: index ? 'none' : 'all',
                            filter: `grayscale(${index ? 1 : 0})`
                          }
                        }
                      : null
                  )
                )
              }
            </pComponent>
          )
        },
        {
          name: 'NList'
        }
      )
    )

    const pView = this.view
    this.view = markRaw(
      defineComponent((props) => {
        this.props.style.border = '1px solid rgba(255, 255, 255, 0.15)'

        return () => (
          <pView>
            <this.component
              style={{
                flexShrink: '0',
                width: '100px',
                height: '50px',
                transform: 'scale(0.8)'
              }}
            ></this.component>
          </pView>
        )
      })
    )

    const pParams = this.params
    this.params = markRaw(
      defineComponent(() => {
        return () => (
          <pParams>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                用法
              </ElText>
              <div class={classes['params-item-content']} style="font-size: 12px;">
                <p>列表只渲染第一个子节点；</p>
                <p>数据函数返回一个长度至少为1的数组。</p>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                换行
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup
                  modelValue={this.props.style.flexWrap}
                  onUpdate:modelValue={(v) => (this.props.style.flexWrap = v)}
                >
                  <ElRadioButton value="wrap" label="换行" size="small"></ElRadioButton>
                  <ElRadioButton value="nowrap" label="不换行" size="small"></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                主轴方向
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup v-model={this.props.style.flexDirection}>
                  <ElRadioButton value="row" label="文本方向/横向" size="small"></ElRadioButton>
                  <ElRadioButton value="row-reverse" label="反横向" size="small"></ElRadioButton>
                  <ElRadioButton value="column" label="块方向/纵向" size="small"></ElRadioButton>
                  <ElRadioButton value="column-reverse" label="反纵向" size="small"></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                主轴内容对齐
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup v-model={this.props.style.justifyContent}>
                  <ElRadioButton value="start" label="起" size="small"></ElRadioButton>
                  <ElRadioButton value="center" label="中" size="small"></ElRadioButton>
                  <ElRadioButton value="end" label="止" size="small"></ElRadioButton>
                  <ElRadioButton value="space-around" label="半均分" size="small"></ElRadioButton>
                  <ElRadioButton value="space-evenly" label="均分" size="small"></ElRadioButton>
                  <ElRadioButton
                    value="space-between"
                    label="两端对齐"
                    size="small"
                  ></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                交叉轴子项对齐
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup v-model={this.props.style.alignItems}>
                  <ElRadioButton value="start" label="起" size="small"></ElRadioButton>
                  <ElRadioButton value="center" label="中" size="small"></ElRadioButton>
                  <ElRadioButton value="end" label="止" size="small"></ElRadioButton>
                  <ElRadioButton value="stretch" label="填满" size="small"></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                交叉轴内容对齐
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup v-model={this.props.style.alignContent}>
                  <ElRadioButton value="start" label="起" size="small"></ElRadioButton>
                  <ElRadioButton value="center" label="中" size="small"></ElRadioButton>
                  <ElRadioButton value="end" label="止" size="small"></ElRadioButton>
                  <ElRadioButton value="space-around" label="半均分" size="small"></ElRadioButton>
                  <ElRadioButton value="space-evenly" label="均分" size="small"></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                行间距
              </ElText>
              <div class={classes['params-item-content']}>
                <ElInput v-model={this.props.style.rowGap} size="small"></ElInput>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                列间距
              </ElText>
              <div class={classes['params-item-content']}>
                <ElInput v-model={this.props.style.columnGap} size="small"></ElInput>
              </div>
            </div>
          </pParams>
        )
      })
    )
  }
}
